<template>
  <div id="cusInfo">
    <div class="cusInfo-content">
         <div class="cusInfo-content-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <div id="baseInfo">
                        <h3 class="baseInfo_title">筛选区</h3>
                        <el-form ref="baseInfoform" :model="form" label-width="80px">
                            <el-form-item label="客户名称" prop="userName"
                            :rules="[{required:true,message:'请输入客户名称',trigger: 'blur'}]">
                                <el-input v-model="form.userName"></el-input>
                                <span class="item-tip-span">4-16个字符的数字、英文字母、下划线，中间不能有空格</span>
                            </el-form-item>
                            <el-form-item label="登录用户名" prop="loginName"
                            :rules="[{required:true,message:'请输入用户名',trigger: 'blur'}]">
                                <el-input v-model="form.loginName"></el-input>
                                <span class="item-tip-span">4-16个字符的数字、英文字母、下划线，中间不能有空格</span>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="password" :error="passworderror"
                            :rules="[{required:true,message:'请输入登录密码',trigger: 'blur'}]">
                                <el-input type="password" v-model="form.password"></el-input>
                                <el-button type="primary" class="resetButton" @click="resetpassword">重置</el-button>
                            </el-form-item>
                            <el-form-item label="账号从属">
                                <el-select v-model="form.cusSub" placeholder="请选择">
                                  <el-option v-for="item in belongList" :label="item.dictLabel" :value="item.id" :key="item.id"/>
                                </el-select>
                            </el-form-item>
                           <el-form-item prop="email" label="E-MAIL"
                                :rules="[
                                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                                ]">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                                <el-input type="number" v-model="form.number"></el-input>
                            </el-form-item>
                            <el-form-item label="客户级别">
                                <el-select v-model="form.cusClass" placeholder="请选择">
                                <el-option label="级别A" value="A"></el-option>
                                <el-option label="级别B" value="B"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="有效期">
                                <el-date-picker
                                    v-model="form.validity"
                                    type="daterange"
                                    range-separator="--"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="开通人">
                                <el-input v-model="form.opener"></el-input>
                            </el-form-item>
                            <el-form-item label="最后一次登录时间">
                                <el-input v-model="form.lastLoginTime"></el-input>
                            </el-form-item>
                            <el-form-item label="最后一次登录IP">
                                <el-input v-model="form.lastLoginIP"></el-input>
                            </el-form-item>
                            <el-form-item label="总推送数据条数">
                                <el-input v-model="form.dataNum"></el-input>
                                <span class="item-tip-span">万条</span>
                            </el-form-item>
                        </el-form>
                        <div class="divider"><span></span></div>
                        <h3 class="baseInfo_title">方案列表</h3>
                        <div class="tableBox">
                          <el-table
                              :data="tableData"
                              border
                              class="sentimentTable"
                              style="width: 100%">
                              <el-table-column
                                type="selection"
                                width="55">
                              </el-table-column>
                              <el-table-column
                              prop="caseName"
                              label="方案名称">
                              </el-table-column>
                              <el-table-column
                              prop="createTime"
                              label="创建时间">
                              </el-table-column>
                              <el-table-column
                              prop="dataNum"
                              label="总数据量/万条（三天）">
                              </el-table-column>
                          </el-table>
                        </div>
                        <div class="filterBox">
                          <span class="filterBox-span">方案名称</span>
                          <el-select
                            v-model="caseName"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in caseNameList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <span class="filterBox-span">时间选择</span>
                          <el-select
                            v-model="timeSelect"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in timeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <div id="lineChart"></div>
                        <div class="groupBtn">
                          <el-button type="primary" @click="backCusManage">返回客户列表</el-button>
                          <el-button type="danger" @click="editCusAuthory">编辑客户权限</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="个性设置" name="second">
                  <div id="personality">
                    <h3 class="personality_title">个性设置</h3>
                    <div class="personality-li">
                      <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="personality.fileList"
                      :limit="1"
                      list-type="picture">
                        <el-button size="small" type="primary">LOGO上传</el-button>
                      </el-upload>
                    </div>
                    <el-form ref="person-form" :model="personality.form" label-width="80px">
                      <el-form-item label="LOGO描述">
                          <el-input v-model="personality.form.describe"></el-input>
                      </el-form-item>
                      <el-form-item label="同时可登录人数设置">
                          <el-input v-model="personality.form.loginNum"></el-input>
                          <span class="item-tip-span">人</span>
                      </el-form-item>
                    </el-form>
                    <el-divider></el-divider>
                    <div class="personality-li">
                      <span class="li-span">预警可选用户：</span>
                      <ul class="li-ul">
                        <li>客户1</li>
                        <li>客户2</li>
                        <li><el-button type="primary">变更</el-button></li>
                      </ul>
                    </div>
                    <div class="personality-li">
                      <span class="li-span">用户可浏览账号：</span>
                      <ul class="li-ul">
                        <li>账号1</li>
                        <li>账号2</li>
                        <li><el-button type="primary">变更</el-button></li>
                      </ul>
                    </div>
                    <el-divider></el-divider>
                    <h3 class="personality_title">大屏登录权限设置</h3>
                    <div class="personality-li">
                      <span class="li-span2">状态</span>
                      <el-radio v-model="personality.statusRadio" label="1">打开</el-radio>
                      <el-radio v-model="personality.statusRadio" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2">模块选择</span>
                      <el-radio v-model="personality.module" label="1">湖北第一版</el-radio>
                      <el-radio v-model="personality.module" label="2">湖北第二版</el-radio>
                      <el-button type="primary" class="li-button">变更</el-button>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2">方案选择</span>
                      <el-checkbox v-model="personality.module" label="1">方案1</el-checkbox>
                      <el-checkbox v-model="personality.module" label="2">方案2</el-checkbox>
                      <el-button type="primary" class="li-button">变更</el-button>
                    </div>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger" @click="subnitUserSetting">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="检测方案" name="third">
                  <div id="monitorCase">
                    <h3 class="baseInfo_title">方案管理</h3>
                    <el-form ref="monitorCase-form" :model="monitorCase.form" label-width="80px">
                      <el-form-item label="可建方案数量">
                          <el-input v-model="monitorCase.form.caseNum"></el-input>
                          <span class="item-tip-span">个</span>
                      </el-form-item>
                      <el-form-item label="方案配词数">
                          <el-input v-model="monitorCase.form.wordNum"></el-input>
                          <span class="item-tip-span">个</span>
                      </el-form-item>
                      <el-form-item label="方案导出数据限制条数">
                          <el-input v-model="monitorCase.form.caseDataNum"></el-input>
                          <span class="item-tip-span">条</span>
                      </el-form-item>
                    </el-form>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">数据来源</h3>
                    <div class="personality-li">
                      <span class="li-span2">接口来源</span>
                      <ul class="li-ul">
                        <li><el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></li>
                        <el-checkbox-group v-model="monitorCase.interface" @change="handleCheckedCitiesChange">
                          <li v-for="item in monitorCase.dataInterface" :key="item.value"><el-checkbox v-model="item.value" :label="item.label">{{item.label}}</el-checkbox></li>
                        </el-checkbox-group>
                      </ul>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2">风险来源</span>
                      <ul class="li-ul">
                        <li><el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></li>
                        <el-checkbox-group v-model="monitorCase.risk" @change="handleCheckedCitiesChange">
                          <li v-for="item in monitorCase.riskResource" :key="item.value"><el-checkbox v-model="item.value" :label="item.label">{{item.label}}</el-checkbox></li>
                        </el-checkbox-group>
                      </ul>
                    </div>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">数据分析
                      <el-switch v-model="monitorCase.dataAnaly"></el-switch>
                    </h3>
                    <div class="personality-li">
                      <span class="li-span2">舆论走势</span>
                      <el-radio v-model="monitorCase.trend" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.trend" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2">媒体分布</span>
                      <el-radio v-model="monitorCase.media" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.media" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2">情绪分析</span>
                      <el-radio v-model="monitorCase.motion" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.motion" label="2">关闭</el-radio>
                    </div>
                     <div class="personality-li">
                      <span class="li-span2">关键词云</span>
                      <el-radio v-model="monitorCase.keyWord" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.keyWord" label="2">关闭</el-radio>
                    </div>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">定向监测
                      <el-switch v-model="monitorCase.dataAnaly"></el-switch>
                    </h3>
                    <el-form ref="monitorCase-form2" :model="monitorCase.form" label-width="80px">
                      <el-form-item label="定向方案网站限制数量">
                          <el-input v-model="monitorCase.form.caseNum2"></el-input>
                          <span class="item-tip-span">个</span>
                      </el-form-item>
                    </el-form>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="预警中心" name="four">
                  <div id="cusWarn">
                    <h3 class="baseInfo_title">定向监测
                      <el-switch v-model="cusWarn.directMonitor"></el-switch>
                    </h3>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">条件设置
                      <el-switch v-model="cusWarn.condition"></el-switch>
                    </h3>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">时间设置
                      <el-switch v-model="cusWarn.timeSet"></el-switch>
                    </h3>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">推送设置
                      <el-switch v-model="cusWarn.pushSet"></el-switch>
                    </h3>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="简报中心" name="five">
                  <div id="cusReport">
                    <h3 class="baseInfo_title">简报中心
                      <el-switch v-model="cusReport"></el-switch>
                    </h3>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="报告中心" name="six">
                  <div id="cusBrief">
                    <h3 class="baseInfo_title">报告中心
                      <el-switch v-model="cusBrief"></el-switch>
                    </h3>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="智能搜索" name="seven">
                  <div id="cusSearch">
                    <h3 class="baseInfo_title">报告中心
                      <el-switch v-model="cusSearch"></el-switch>
                    </h3>
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
            </el-tabs>
         </div>
    </div>

  <el-dialog
    title="预警可选用户"
    class="cusWarn"
    :close-on-click-modal="false"
    :visible.sync="dialogData.dialogVisible"
    width="640px">
    <div class="checkDIV">
      <el-checkbox v-for="item in dialogData.cusList" :label="item.label" :key="item.value" v-model="checked"></el-checkbox>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogData.dialogVisible = false">返回</el-button>
      <el-button type="primary" @click="dialogData.dialogVisible = false">确定</el-button>
    </span>
  </el-dialog>




  </div>
</template>

<script>
import '../assets/css/cusInfo.css'
import {
  resetpwd,
  systemTemplateList,
  systemUserSetting
} from './api.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
        activeName: 'first',
        passworderror: '',
        belongList: [],
        form: {
          userName: '',
          loginName: '',
          password: '',
          cusSub: '',
          email: '',
          number: '',
          cusClass: '',
          validity: '',
          opener: '',
          lastLoginTime: '',
          lastLoginIP: '',
          dataNum: ''
        },
        tableData:[
          {
            id: '324324',
            caseName: '方案名称1',
            createTime: '2019-12-01',
            dataNum: '1000'
          }
        ],
        caseName: '',
        caseNameList: [
          {label: '全部', value: '0'},
          {label: '方案名称1', value: '1'},
          {label: '方案名称2', value: '2'}
        ],
        timeSelect: '0',
        timeList: [
          {label: '3天', value: '0'},
          {label: '7天', value: '1'},
          {label: '30天', value: '2'}
        ],
        personality: {
          fileList: [],
          form:{
            describe: '',
            loginNum: ''
          },
          statusRadio: '1',
          module: '1'
        },
        dialogData:{
          dialogVisible: false,
          cusList: [
            {label: '客户1', value: '1'},
            {label: '客户2', value: '2'},
            {label: '客户3', value: '3'},
            {label: '客户4', value: '4'},
            {label: '客户5', value: '5'},
            {label: '客户6', value: '6'},
            {label: '客户7', value: '7'},
            {label: '客户8', value: '8'},
            {label: '客户9', value: '9'},
            {label: '客户10', value: '10'},
            {label: '客户11', value: '11'}
          ]
        },
        monitorCase:{
          form:{
            caseNum: '',
            wordNum: '',
            caseDataNum: '',
            caseNum2: ''
          },
          interface:[],
          isIndeterminate1: '',
          dataInterface: [
            {label: '接口1', value: '1'},
            {label: '接口2', value: '2'},
            {label: '接口3', value: '3'},
            {label: '接口4', value: '4'},
            {label: '接口5', value: '5'},
            {label: '接口6', value: '6'},
            {label: '接口7', value: '7'},
            {label: '接口8', value: '8'},
            {label: '接口9', value: '9'},
            {label: '接口10', value: '10'},
            {label: '接口11', value: '11'},
          ],
          risk:[],
          isIndeterminate2: '',
          riskResource: [
            {label: '微博', value: '1'},
            {label: '微信', value: '2'},
            {label: '新闻', value: '3'},
            {label: '电子报', value: '4'},
            {label: '论坛', value: '5'},
            {label: '短视频', value: '6'},
            {label: '贴吧', value: '7'},
            {label: '视频', value: '8'},
            {label: '其他', value: '9'}
          ],
          dataAnaly: true,
          trend: '1',
          media: '1',
          motion: '1',
          keyWord: '1'
        },
        cusWarn: {
          directMonitor: true,
          condition: true,
          timeSet: true,
          pushSet: true
        },
        cusReport: true,
        cusBrief: true,
        cusSearch: true
        
    }
  },
  mounted(){
    this.$Api.systemUserDetail(this.$route.query.id).then(({data}) => {
      this.form = {...this.form, ...data}
    })
    this.$Api.systemDict('sys_user_belong').then(({data}) => {
      this.belongList = data
    })
    systemTemplateList()
    this.drawLine()
  },
  methods: {
    resetpassword () {
      if (this.form.password) {
        resetpwd({
          id: this.$route.query.id,
          password: this.form.password
        })
      } else {
        this.$refs.baseInfoform.validateField('password')
      }
    },
    editCusAuthory(){
      this.activeName = 'second'
    },
    backCusManage(){
      this.$router.push({path: '/custom'});
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log('submit!');
    },
    drawLine(){
        var lineChart = this.$echarts.init(document.getElementById("lineChart"));
        
        var option = {
            tooltip: {
                backgroundColor: 'rgba(255,255,255,.8)',
                borderColor: '#2f74ff',
                borderWidth: 1,
                borderRadius: 0,
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    z: '1',
                    lineStyle: {
                        width: 1,
                    }
                },
                textStyle: {
                    color: '#333333'
                },

                formatter: function (datas) {
                    var res = datas[0].name + '<br/>', val;
                    for (var i = 0, length = datas.length; i < length; i++) {
                        val = (datas[i].value);
                        res += datas[i].seriesName + '：' + val + '<br/>';
                    }
                    return res;
                }

            },
            grid: {
                left: '4%',
                right: '50',
                bottom: '0',
                show: false,
                containLabel: true
            },
            xAxis: {
                name: "日期",
                nameTextStyle: {
                    color: "#a4b2cc",
                    align: "left"
                },
                type: 'category',
                boundaryGap: true,
                data: ['10/11', '10/12', '10/13', '10/14', '10/15', '10/16'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebf2fc',
                    }
                },
                axisTick:{
                    show:false,
                },
                axisLabel: {
                    show: true,
                    interval:0,
                    textStyle: {
                        color: '#a7b2c8',
                        align: 'center',
                        fontSize:12
                    },
                    formatter: function (value) {
                        // 格式化成月/日，只在第一个刻度显示年份
                        let valueArr=value.split(" ")
                        return valueArr.join("\n")
                    }
                }
            },
            yAxis: {
                name: "数据/条数（万条）",
                nameTextStyle: {
                    color: "#a4b2cc"
                },
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ["#ebf2fc"],
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: true,
                    showMaxLabel: false,
                    color: '#06D3CD',
                    textStyle: {
                        color: '#a4b2cc'
                    }
                }
            },
            calculable : true,
            series: [
                {
                    name: '数据/条数',
                    type: 'line',
                    smooth: true,
                    data: [40, 30, 20, 20, 32, 23],
                    hoverAnimation: false,
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        color: '#fd5f60',
                        shadowColor: 'rgba(253,95,96,0.7)',
                        shadowOffsetX: 0,
                        shadowOffsetY: 5,
                        shadowBlur: 10
                    },
                    itemStyle: {
                        normal: {
                            color: '#fd5f60'
                        }
                    },
                    showSymbol: false
                }
            ]
        };
        lineChart.setOption(option)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
     handleCheckAllChange() {
      // this.checkedCities = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
    handleCheckedCitiesChange() {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    subnitUserSetting () {
      systemUserSetting({
        userId: this.$route.query.id,
        logoUrl: '',
        logoDesc: 'xxxxxxxxxxxx',
        loginPersonNum: 12
      })
    },
    // 报告中心开关
    reportSwitchSetting () {
      systemUserSetting({
        userId: this.$route.query.id,
        reportUploadSwitch: 1
      })
    },
    // 智能搜索开关
    searchSwitchSetting () {
      systemUserSetting({
        userId: this.$route.query.id,
        searchSwitch: 1
      })
    },
  },
  components:{
  }
}
</script>
<style>
/* #pageHome{
background: #ccc;
width:calc(100% - 200px);
} */

</style>
